<template>
  <div class="wrap">
    <header>2019级新生报到情况表</header>
    <tab active-color="#37aefc"
         bar-active-color="#37aefc">
      <tab-item selected
                class="tab-item">报到情况</tab-item>
      <tab-item class="tab-item"
                @on-item-click="$router.push('/admin/dormInfo')">宿舍情况</tab-item>
    </tab>
    <p class="time">截至统计时间：{{allStatus.time}}</p>
    <div style="margin:20px auto;">
      <flexbox>
        <flexbox-item>
          <div class="flex-box">录取人数：{{allStatus.admissionSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box">报到人数：{{allStatus.comersSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-box">报到率：{{allStatus.comersRateSum}}</div>
        </flexbox-item>
      </flexbox>
      <flexbox>
        <flexbox-item>
          <div class="flex-content">男生录取人数：{{allStatus.admissionManSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">男生报到人数：{{allStatus.comersManSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">男生报到率：{{allStatus.comersRateManSum}}</div>
        </flexbox-item>
      </flexbox>
      <flexbox>
        <flexbox-item>
          <div class="flex-content">女生录取人数：{{allStatus.admissionWomanSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">女生报到人数：{{allStatus.comersWomanSum}}</div>
        </flexbox-item>
        <flexbox-item>
          <div class="flex-content">女生报到率：{{allStatus.comersRateWomanSum}}</div>
        </flexbox-item>
      </flexbox>
    </div>
    <button-tab>
      <button-tab-item selected>院系查看</button-tab-item>
      <button-tab-item @click.native="toReport">专业查看</button-tab-item>
    </button-tab>
    <button-tab>
      <button-tab-item @click.native="getManData">男</button-tab-item>
      <button-tab-item selected
                       @click.native="getAllData">总</button-tab-item>
      <button-tab-item @click.native="getWomanData">女</button-tab-item>
    </button-tab>
    <div id="main"
         style="width: 100%; height: 300px;"></div>
    <div id="pie1"
         style="width: 100%; height: 300px;"></div>
    <div id="pie2"
         style="width: 100%; height: 300px;"></div>
    <p class="copyright">技术支持&copy;三月软件小组</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allStatus: [],
      departmentData: [],
      allName: [],
      allName_bar: [],
      allRate: [],
      allArriveNum: [],
      surplus: []
    };
  },
  mounted() {
    // 获取上方报到人数及比例
    this.axios({
      method: "get",
      url: "/student/getAllStatus"
    })
      .then(res => {
        if (res.data.code == 0) {
          this.allStatus = res.data.result;
        } else if (resp.data.code == 2) {
          this.$router.push("/admin/login");
        }
      })
      .catch(error => {
        console.log(error, "error");
      });
    this.getAllData(0);
  },
  methods: {
    toReport() {
      this.$vux.loading.show({
        text: "Loading"
      });
      setTimeout(() => {
        this.$vux.loading.hide();
        this.$router.push("/admin/reportChart");
      }, 300);
    },
    // 获取全部学院信息
    getDepartmentData(sex) {
      let _this = this;
      // 获取院系报到情况
      this.axios({
        method: "get",
        url: "/student/showCACRate",
        params: {
          type: 0,
          sex: sex
        }
      })
        .then(res => {
          if (res.data.code === 0) {
            this.allName = [];
            this.allName_bar = [];
            this.allRate = [];
            this.allArriveNum = [];
            this.surplus = [];
            this.departmentData = res.data.result;
            for (let i = 0; i < res.data.result.length; i++) {
              this.allName.push(res.data.result[i].name);
              this.allRate.push(res.data.result[i].rate);
              this.allArriveNum.push(res.data.result[i].arriveNum);
              this.surplus.push(
                res.data.result[i].allNum - res.data.result[i].arriveNum
              );
            }
            this.allName_bar = this.allName.map(function(value, key, array) {
              return (_this.allName_bar[key] =
                "(" + (array.length - key) + ")" + value);
            });
            this.drawLine();
            this.drawLinePie1();
            this.drawLinePie2();
            localStorage.setItem("sex", sex);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取全部学院信息
    getAllData() {
      this.getDepartmentData(0);
    },
    // 获取学院男生信息
    getManData() {
      this.getDepartmentData(1);
    },
    // 获取学院女生信息
    getWomanData() {
      this.getDepartmentData(2);
    },
    drawLine() {
      let _this = this;
      let myChart = this.echarts.init(document.getElementById("main"));
      let option = {
        color: ["#37A2DA"],
        title: {
          text: "各学院报到率",
          textAlign: "center",
          left: "50%",
          top: "5%",
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "12px" }
        },
        grid: {
          containLabel: true,
          left: "5%",
          bottom: 0,
          top: "15%",
          right: "5%"
        },
        xAxis: {
          type: "value",
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: "category",
          data: this.allName_bar,
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c} %"
              }
            },
            data: this.allRate
          }
        ]
      };
      myChart.on("click", function(param) {
        localStorage.setItem(
          "name",
          param.name.slice(param.name.indexOf(")") + 1)
        );
        localStorage.setItem("type", 0);
        _this.$router.push("/admin/details");
      });
      myChart.setOption(option);
      let autoHeight = this.allName.length * 28;
      myChart.getDom().style.height = autoHeight + "px";
      myChart.getDom().childNodes[0].style.height = autoHeight + "px";
      myChart.getDom().childNodes[0].childNodes[0].style.height =
        autoHeight + "px";
      myChart.resize();
    },
    drawLinePie1() {
      let _this = this;
      let myPie1 = this.echarts.init(document.getElementById("pie1"));
      let pieData = [];
      for (let i = 0; i < this.departmentData.length; i++) {
        let pie_data = {};
        pie_data.value = this.allArriveNum[i];
        pie_data.name = this.allName[i] + "\n" + this.allArriveNum[i] + "人";
        pieData.push(pie_data);
      }
      let option = {
        title: {
          text: "各学院报到人数",
          textAlign: "center",
          left: "50%",
          top: 0,
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "12px" }
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: { length: 5 },
            data: pieData,
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#f49f42"
            ]
          }
        ]
      };
      myPie1.on("click", function(param) {
        localStorage.setItem("name", param.name);
        localStorage.setItem("type", 0);
        _this.$router.push("/admin/details");
      });
      myPie1.setOption(option);
    },
    drawLinePie2() {
      let _this = this;
      let myPie2 = this.echarts.init(document.getElementById("pie2"));
      let pieData = [];
      for (let i = 0; i < this.departmentData.length; i++) {
        let pie_data = {};
        pie_data.value = this.surplus[i];
        pie_data.name = this.allName[i] + "\n" + this.surplus[i] + "人";
        pieData.push(pie_data);
      }
      let option = {
        // color: ["#37A2DA"],
        title: {
          text: "各学院未报到人数",
          textAlign: "center",
          left: "50%",
          top: 0,
          textStyle: { color: "rgba(102, 102, 102, 1)", fontSize: "12px" }
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            labelLine: { length: 5 },
            data: pieData,
            color: [
              "#dd6b66",
              "#759aa0",
              "#e69d87",
              "#8dc1a9",
              "#ea7e53",
              "#eedd78",
              "#73a373",
              "#73b9bc",
              "#7289ab",
              "#91ca8c",
              "#f49f42"
            ]
          }
        ]
      };
      myPie2.on("click", function(param) {
        localStorage.setItem("name", param.name);
        localStorage.setItem("type", 0);
        _this.$router.push("/admin/details");
      });
      myPie2.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;
  background: linear-gradient(#fff, #afd0e4);
}
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.time {
  letter-spacing: 1px;
  font-size: 12px;
  text-align: center;
  margin: 15px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-box {
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}
.flex-content {
  font-size: 12px;
  padding-top: 5px;
  color: rgba(102, 102, 102, 0.8);
}
// vux.class.vux-flexbox
.vux-flexbox {
  text-align: center;
}

.tab-item {
  cursor: pointer;
  font-size: 16px !important;
  letter-spacing: 1px;
}
.button-tab-item {
  border: @button-tab-default-border-color;
}
.vux-button-group {
  width: 70%;
  margin: auto;
  margin-top: 15px;
}
.vux-button-group > a.vux-button-group-current {
  background-color: rgb(55, 174, 252);
}
.copyright {
  font-size: 11px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
 
